<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <style>
        .btn {
            background-color: antiquewhite;
            padding: 5px 20px;
            margin: 20px;
            color: black;
        }
    </style>
</head>
<body>
    <h1>Index</h1>
    <a class="btn" onclick="ajax1()">点我</a><br>
    <a class="btn" onclick="ajax2()">点我</a><br>
    <a class="btn" onclick="ajax3()">点我</a><br>
    <a class="btn" onclick="ajax4()">点我</a><br>
    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <script>
        function ajax1() {
            $.ajax({
                url: "/ajax1",
                type: "GET",
                data: {"abc": 123},
                success: function (arg) {
                    console.log(arg)
                }
            })
        }
        function ajax2() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    console.log(xhr.responseText);
                }
            };
            xhr.open('GET', '/ajax2?p=123');
            xhr.send(null)
            
        }
        function ajax3() {
            $.ajax({
                url: "/ajax1",
                type: "POST",
                data: {"abc": 123},
                success: function (arg) {
                    console.log(arg)
                }
            })
        }
        function ajax4() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    console.log(xhr.responseText);
                }
            };
            xhr.open('POST', '/ajax2');
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            xhr.send("p=123");

        }
    </script>
</body>
</html>